<template>
  <!-- 用户新增/编辑表单 -->
  <el-form ref="userFormRef" :model="formData" :rules="rules" label-width="80px">
    <el-form-item label="名称" prop="name">
      <el-input v-model="formData.name" :readonly="!!formData.id" placeholder="请输入用户名" />
    </el-form-item>

    <el-form-item label="所属部门" prop="deptId">
      <base-tree-select v-model="formData.deptId" placeholder="请选择所属部门" :data="deptList" filterable check-strictly :render-after-expand="false" />
    </el-form-item>

    <el-form-item label="性别" prop="sex">
      <el-select v-model="formData.sex" placeholder="请选择性别" clearable>
        <el-option key="male" label="男" value="male" />
        <el-option key="female" label="女" value="female" />
      </el-select>
    </el-form-item>

    <el-form-item label="手机号码" prop="mobile">
      <el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" />
    </el-form-item>

    <el-form-item label="邮箱" prop="email">
      <el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
    </el-form-item>

    <el-form-item label="用户名" prop="loginName">
      <el-input v-model="formData.loginName" placeholder="请输入账号" maxlength="50" />
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-radio-group v-model="formData.status">
        <el-radio label="enable">正常</el-radio>
        <el-radio label="disable">禁用</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>
<script setup>
  import { findUserById, saveUser } from '@/api/user/index';
  import { listDepts } from '@/api/dept/index';
  const props = defineProps({ id: { type: String, required: true } });

  let defaultFromData = {
    id: '',
    name: '',
    deptId: '',
    sex: '',
    mobile: '',
    email: '',
    loginName: '',
    status: 'enable',
  };

  const formData = reactive(Object.assign({}, defaultFromData));
  const deptList = ref([]); // 部门列表
  function init() {
    listDepts().then((response) => {
      deptList.value = response.data;
    });
  }
  init();

  watch(
    () => props.id,
    () => {
      if (props.id) {
        loadData();
      } else {
        Object.assign(formData, defaultFromData, {});
      }
    },
    { immediate: true }
  );

  function loadData() {
    findUserById(props.id).then(({ data }) => {
      Object.assign(formData, defaultFromData, data);
    });
  }

  // 校验规则
  const rules = reactive({
    name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
    deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
    email: [
      {
        pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
        message: '请输入正确的邮箱地址',
        trigger: 'blur',
      },
    ],
    mobile: [
      {
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur',
      },
    ],
  });

  const userFormRef = ref(ElForm);

  const save = function () {
    userFormRef.value.validate((valid) => {
      if (valid) {
        const loading = ElLoading.service({ fullscreen: true });
        saveUser(formData)
          .then(({ data }) => {
            formData.id = data.id;
            ElMessage.success('修改用户成功');
          })
          .finally(() => {
            loading.close();
          });
      }
    });
  };

  const setValue = function (data) {
    Object.assign(formData, defaultFromData, data);
  };

  defineExpose({ save, setValue });
</script>
